<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理table</title>
    <link rel="stylesheet" href="<%=HTTP_ROOT%>/css/bootstrap.css">
    <style>
        /* 弹出框的遮罩层, 背景为暗黑 */
        .my-panel {
            width: 60%;
            position: absolute;
            left: 20%;
            top: 200px;
            z-index: 100;
            display: none;
        }
        .my-panel-shadow {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: #000;
            opacity: 0.6;
            display: none;    
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <ul class="nav nav-tabs">
        <% Object.keys(page_types).forEach(key => {%>
            <li role="presentation" class="active">
                <a href="<%=HTTP_ROOT%>/admin/<%=key%>"><%=page_types[key]%></a>
            </li>
        <%})%>
    </ul>
    <!-- 左上添加按钮 -->
    <a href="#" class="btn btn-primary glyphicon glyphicon-plus" id="btn_add">添加</a>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <% fields.forEach(field => {%>
                    <th><%=field.title%></th>
                <%})%>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <% datas.forEach(data => { %>
            <tr>
                <td><%= data.ID%></td>
                <%fields.forEach(field => {%>
                <td><%=data[field.name]%></td>
                <%})%>
                <td>
                    <a href="<%=HTTP_ROOT%>/admin/<%=page_type%>/delete/<%=data.ID%>"
                        class="btn btn-danger">删除</a>
                    <a href="#" data-id="<%=data.ID%>" class="btn btn-default btn_modify">修改</a>
                </td>
            </tr>
            <% }) %>
        </tbody>
    </table>


    <!-- 添加 或 修改 弹出form表单以及遮罩层 -->

    <div class="panel panel-default my-panel">
        <div class="panel-heading">
            <div class="panel-title">
                添加
            </div>
        </div>
        <div class="panel-body">
            <form action="<%=HTTP_ROOT%>/admin/<%=page_type%>" class="form form-horizontal" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <% fields.forEach(field => {%>
                        <label class="col-sm-2 control-label">
                            <%=field.title%></label>
                        <div class="col-sm-10">
                            <input type="<%=field.type%>" class="form-control" name="<%=field.name%>" placeholder="<%=field.title%>">
                        </div>
                    <%})%>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button type="submit" class="btn-primary form-control">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="my-panel-shadow"></div>


    <script src="<%=HTTP_ROOT%>/js/jquery.min.js"></script>
    <script>
        $('#btn_add').click(function () {
            $('.my-panel, .my-panel-shadow').show();
        });
    </script>
    <script>
        const HTTP_ROOT = '<%=HTTP_ROOT%>';
        const page_type = '<%=page_type%>';
    </script>
    <script>
        $('.btn_modify').click(async function () {
            let id = this.dataset.id;
            let url = `${HTTP_ROOT}/admin/${page_type}/get/${id}`;
            let data = await $.ajax({
                url,
                dataType: 'json'
            });
            if (data.err) {
                alert(data.msg);
            } else {
                let old_data = data.data;
                $('.my-panel').show();
                $('.my-panel-shadow').show();
                $('.panel-title').html('修改');
                // 由于项目案例以后端为主,所以提交post请求依然采用action 表单提交方式,可以自行修改为ajax的post
                $('form').attr('action', `${HTTP_ROOT}/admin/${page_type}/modify/${id}`);
                $('.my-panel input').each(function () {
                    if (old_data[this.name]) {
                        // try catch是因为 文件是不能赋值的, 普通表单元素的值可以通过this.value = xxx 进行修改,文件不行
                        try {
                            this.value = old_data[this.name];       
                        } catch (e) {
                        }
                    }
                })
            }

        })


    </script>

  
</body>

</html>